<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 渠道货物类型管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form>
                    <el-form-item label="类型" prop="TypeAList">
                        <el-button type="primary" icon="el-icon-plus" @click="handleAddTypeA">新增类型</el-button>
                        <el-radio-group v-model="currentTypeAname" >
                            <el-radio-button v-for="item in TypeAList" :key="item" :label="item">{{ item }} </el-radio-button>
                        </el-radio-group>

                        <el-button type="primary" icon="el-icon-delete" @click="handleDeleteTypeA" v-if="currentTypeAname != ''"
                            >删除类型</el-button
                        >
                    </el-form-item>                    
                </el-form>
            </div>
        </div>

        <el-dialog title="新建类型" :visible.sync="addTypeAVisible" width="60%">
            <el-form ref="addform" :model="addTypeAform" :rules="addTypeAformRules" label-width="120px">
                <el-form-item label="类型名称" prop="name">
                    <el-input v-model="addTypeAform.name" maxlength="20" show-word-limit clearable class="formInput"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addTypeAVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveaddTypeA">确 定</el-button>
            </span>
        </el-dialog>
        
        <el-dialog title="删除类型" :visible.sync="deleteTypeAVisible" width="60%">
            <el-form ref="form" :model="deleteTypeAform" :rules="deleteTypeAformRules" label-width="120px">
                <el-form-item label="类型" prop="name">
                    <el-input v-model="deleteTypeAform.name" maxlength="20" show-word-limit disabled class="formInput"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteTypeAVisible = false">取 消</el-button>
                <el-button type="primary" @click="savedeleteTypeA">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import JSTool from '../../../utils/JSTool';
import dataTable from './dataTable';

export default {
    name: 'channelTypeManage',
    mixins: [dataTable],

    data() {
        return {
            addTypeAVisible: false,
            deleteTypeAVisible: false,
            TypeAList: [],
            currentTypeAname: '',
            addTypeAform: {
                name: ''
            },
            addTypeAformRules: {},
            
            deleteTypeAform: {
                name: '',
            },
            deleteTypeAformRules: {},
           
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    methods: {
        //页面初始化
        init() {
            this.getData();
        },
        getData() {
            this.TypeAList = [];
            this.currentTypeAname = '';
            API.StandardDoWith(API.Channeltype.Get(), this, {
                success: (detail) => {
                    this.TypeAList = detail;
                }
            });
        },

        handleAddTypeA() {
            this.addTypeAform.name = '';
            this.addTypeAVisible = true;
        },
        handleDeleteTypeA() {
            if (this.currentTypeAname == '') {
                this.$message.error(`请选择需删除的类型`);
                return;
            }
            this.deleteTypeAform.name = this.currentTypeAname;
            this.deleteTypeAVisible = true;
        },
        saveaddTypeA() {
            let postForm = JSTool.DeepClone(this.addTypeAform);
            API.StandardDoWith(API.Channeltype.Post(postForm), this, {
                success: (detail) => {
                    this.$message.success(`成功添加类型`);
                    this.addTypeAVisible = false;
                    this.getData();
                }
            });
        },
        savedeleteTypeA() {
            API.StandardDoWith(API.Channeltype.Delete({ name: this.deleteTypeAform.name }), this, {
                success: (detail) => {
                    this.$message.success(`成功删除类型`);
                    this.deleteTypeAVisible = false;
                    this.getData();
                }
            });
        },
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
.excel {
    width: 100%;
}
.excel table {
    margin: 0 auto;
    text-align: center;
    border: 1px solid gray;
}
.excel table tr td {
    margin: 5px 10px;
    padding: 5px;
    border: 1px solid gray;
}
</style>
